<template>
  <div class="statistics m-6">
    <!-- 查询 -->
    <el-row>
      <el-col class="mb-2">
        <el-tree-select
          v-if="role_ids.includes(1) || role_ids.includes(4)"
          class="ya-search-value mr-6 mb-2"
          v-model="query.dept_id"
          :data="dept_list"
          :props="{
            children: 'children', //自定义属性
            label: 'dept_name',
            value: 'dept_id'
          }"
          filterable
          clearable
          placeholder="所属组"
          default-expand-all
          :render-after-expand="false"
          check-strictly
        />
        <el-select
          v-if="role_ids.includes(1) || role_ids.includes(3) || role_ids.includes(4)"
          v-model="query.user_id"
          filterable
          class="ya-search-value mr-6 mb-2"
          clearable
          placeholder="请选择销售人员"
        >
          <el-option
            v-for="item in user_list"
            :key="item.user_id"
            :label="item.nickname"
            :value="item.user_id"
          />
        </el-select>
        <el-date-picker
          v-model="query.date_value"
          type="datetimerange"
          class="ya-date-value mr-6 mb-2"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :shortcuts="dateShortcuts"
          @change="search()"
          popper-class="datetimerange-style"
          value-format="YYYY-MM-DD HH:mm:ss"
          :default-time="[new Date(2024, 1, 1, 0, 0, 0), new Date(2024, 1, 1, 23, 59, 59)]"
        />
        <el-button class="mb-2" type="primary" @click="search()">查询</el-button>
        <el-button class="mb-2" title="重置" @click="refresh()">重置 </el-button>
      </el-col>
    </el-row>
    <el-table :data="tableData" style="width: 100%;" height="calc(100vh - 260px)">
      <el-table-column prop="date" label="日期" />
      <el-table-column
        v-if="role_ids.includes(1) || role_ids.includes(3) || role_ids.includes(4)"
        prop="dept_names"
        label="所属组"
      />
      <el-table-column
        v-if="role_ids.includes(1) || role_ids.includes(3) || role_ids.includes(4)"
        prop="nickname"
        label="销售员"
      />
      <!-- <el-table-column prop="date" label="手机"/> -->
      <el-table-column prop="pay_real" label="销售金额">
        <template #header="scope">
          <el-tooltip class="box-item" effect="dark" content="未扣除退款" placement="top">
            <el-text style="cursor: pointer; color: #999999">
              销售金额
              <el-icon>
                <QuestionFilled />
              </el-icon>
            </el-text>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="refund" label="退款金额" />
      <el-table-column prop="payers" label="交易人数" />
      <el-table-column prop="content_num" label="方案发布数" />
      <el-table-column prop="fans_num" label="粉丝数量" />
      <!-- <el-table-column prop="address" label="交易笔数" /> -->
    </el-table>
    <!-- 分页 -->
    <pagination
      v-show="count > 0"
      v-model:total="count"
      v-model:page="query.page"
      v-model:limit="query.limit"
      @pagination="init"
    />
  </div>
</template>
<script>
import { QuestionFilled } from '@element-plus/icons-vue'
import { statistics } from '@/api/order/statistics'
import Pagination from '@/components/Pagination/index.vue'
import { useUserStoreHook } from '@/store/modules/user'
import dayjs from 'dayjs'
import { shortcuts } from '@/utils/index'
import { myUserList } from '@/api/order/statistics'
const userStore = useUserStoreHook()
export default {
  name: 'OrderStatistics',
  components: { Pagination },
  data() {
    return {
      QuestionFilled,
      dateShortcuts: shortcuts, //下拉时间段：本月、本周、本日
      query: {
        page: 1,
        limit: 30,
        date_field: 'date',
        date_value: [
          `${dayjs().startOf('month').format('YYYY-MM-DD')} 00:00:00`,
          `${dayjs().format('YYYY-MM-DD 23:59:59')}`
        ] //默认当天
      },
      user_list: [], //销售员
      dept_list: [], //所属组
      tableData: [], //表格数据
      count: 0, //分页总条数
      role_ids: [],
      dept_id: '',
      user_id: ''
    }
  },
  watch: {
    'query.dept_id': {
      handler() {
        this.user_list = []
        this.query.user_id = ''
        if (this.query.dept_id) {
          myUserList({
            dept_id: this.query.dept_id
          })
            .then((res) => {
              console.log(res)
              if (res.code == 200) {
                this.user_list = res.data
              }
            })
            .catch(() => {
              this.loading = false
            })
        } else {
          this.user_list = userStore.user.user_list
        }
      }
    }
  },
  mounted() {
    this.user_list = userStore.user.user_list
    this.dept_list = userStore.user.dept_list
    this.im_list = userStore.user.im_list
    this.role_ids = userStore.user.role_ids
    if (this.role_ids.includes(3)||this.role_ids.includes(4)) {
      this.query.user_id = userStore.user.user_id
    }
    this.init()
  },
  methods: {
    // 查询
    search() {
      this.query.page = 1
      this.init()
    },
    // 刷新
    refresh() {
      const limit = this.query.limit
      this.query = this.$options.data().query
      this.query.limit = limit
      if (this.role_ids.includes(3)) {
        this.query.user_id = userStore.user.user_id
      }
      this.init()
    },
    // 初始数据
    init() {
      statistics(this.query).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.list
          this.count = res.data.count
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped></style>
